<template>
  	<div id="login">
  		<div id="left">
  		</div>
  		<div id="right">
  			<div id="right-top">
  				<div id="nav-top-left">
  					<a href="/index"><img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/index-img/milogo.png"/></a>
  					<span>小米账号</span>
  				</div>
  				<div id="nav-top-right">
  					<ul>
  						<li>
  							<a href="">中文简体</a>
  						</li>
  						<li><a href="">帮助中心</a></li>
  						<li><a href="">隐私政策</a></li>
  						<li><a href="">用户协议</a></li>
  					</ul>
  				</div>
  				<ul id="xl" style="display: none ;">
  					<li>中文简体</li>
  					<li>English</li>
  				</ul>
  			</div>
  			<div id="fotter">
  				<form class="login-form" action ="" method="post">
  					<div class="login01">
  						<a  id="t1" >登录</a>
  						<a  id="t2">注册</a>
  						<div id="wl">
  						</div>
  						</br>
  						<input type="text" placeholder="邮箱/手机号码/小米ID/" id="user" autocomplete='off' v-model="username"/>
  						</br>
  						<input type="password" placeholder="密码" id="password" autocomplete='off' v-model="password"/>
  						</br>
  						<input type="checkbox" id="cx" v-model="sign" />
  						<span id="login-span">以阅读并同意小米账号<a href="">用户协议</a> 和<a href="">隐私政策</a></span>
  						<br>
  						<button type="button" id="login-button" @click="login()">登录</button>
  						<br>
  						<div id="login-f">
  							<a href="">忘记密码?</a>
  							<a href="">手机号登录</a>
  						</div>
  					</div>
  					<div id="buttom">
  						<p>其他登录方式</p>
  						<img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/index-img/wzqw.png" >
  					</div>
  				</form>
  			</div>
  			<div id="charge">
  				<form class="login-form" action="" style="display: none;">
  					<div class="login01">
  						<a  id="t3">登录</a>
  						<a  id="t4">注册</a>
  						<div id="wl1">
  						</div>
  						</br>
  						<input type="text" autocomplete="off" placeholder="请输入用户名" id="user1"  v-model="registerusername"/>
  						</br>
  						<input type="password" autocomplete="off" placeholder="请输入密码"  v-model="registerpassword"/>
  						</br>
              <input type="text" autocomplete="off" placeholder="请输入手机号"  v-model="phone"/>
              </br>
  						<input type="checkbox" id="cx1" v-model="sign" />
  						<span id="login-span1">以阅读并同意小米账号<a href="">用户协议</a> 和<a href="">隐私政策</a></span>
  						<br>
  						<button type="buton" id="login-button1" @click="register()">注册</button>
  						<br>
  					</div>
  					<div id="buttom1">
  						<p>其他登录方式</p>
  						<img src="http://ft-shopping.oss-cn-chengdu.aliyuncs.com/index-img/wzqw.png" >
  					</div>
  				</form>
  			</div>
  		</div>
      <remote-js></remote-js>
  	</div>
</template>

<script>
export default{
    name:'login',
    data(){
      return{
        username:'',
        password:'',
        registerusername:'',
        registerpassword:'',
        phone:'',
        sign:false,
      }
    },

    methods:{
      login(){
        if(this.sign == false){
          this.$message({
            message: '请勾选用户协议和隐私政策',
            type: 'error',
            center:true,
            duration:1000,
          });
        }else{
          this.$axios({
            url: 'http://124.220.191.116:8081/users/login',
            method:'post',
            data:{
              "name":this.username,
              "password":this.password
            },
          }).then(res=>{
            console.log(res.data.code)
            if(res.data.code == 20010){
              //提示用户名或者密码错误
              this.$message({
                message: '登录失败，用户名或密码错误！',
                type: 'error',
                center:true,
                duration:1000,
              });
            }else{
              //正确跳转页面
              this.$message({
                message: '恭喜你，登录成功！',
                type: 'success',
                center:true,
                duration:1000
              });
              //定义用户session对象
              var user = {
                id:0,
                name:"",
                role:0,
              }
              //定义购物车
              var spcar = []
              user.id = res.data.date.id
              user.name = res.data.date.name
              user.role = res.data.date.role
              sessionStorage.setItem('user',JSON.stringify(user))
              sessionStorage.setItem('islogin',true)
               sessionStorage.setItem('spcar',JSON.stringify(spcar))
              this.$store.dispatch('setuser',JSON.stringify(user))
              this.$store.dispatch('setislogin',true)
              setTimeout(()=>{
                    this.$router.push("/index")
              },1500)
            }
          });
        }
        },
        //注册
        register(){
          if(this.sign == false){
            this.$message({
              message: '请勾选用户协议和隐私政策',
              type: 'error',
              center:true,
              duration:1000,
            });
          }else{
            this.$axios({
              url: 'http://124.220.191.116:8081/users',
              method:'post',
              data:{
                name:this.registerusername,
                password:this.registerpassword,
                phone:this.phone
              },
            }).then(res=>{
              if(res.data.code == 20010){
                //用户名已存在
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  center:true,
                  duration:1000,
                });
              }else{
                //正确跳转页面
                this.$message({
                  message: '注册成功！快去登录吧',
                  type: 'success',
                  center:true,
                  duration:1000
                });
                this.$router.go(0)
              }
            });
          }
        },
    },
    components: {
      //导入js样式
      'remote-js': {
       render(createElement) {
        return createElement(
         'script',
         {
          attrs: {
           type: 'text/javascript',
           src: '../../static/js/login.js',
          },
         },
        );
       },
      },
     },
  }
</script>

<style scoped>
  @import url('../../static/css/login.css');
</style>
